/**
 * <p>Factory method to get customized Ext.form.FormPanel</p>
 */
var infoPanel = function(config) {
	return new Ext.form.FormPanel(Ext.apply({
		labelWidth : 100,
		frame      : true,
		header     : true,
		bodyStyle  : 'padding:5px 5px 0',
		width      : 450,
		defaults   : {
			width : 300
		},
		defaultType : 'textfield'
	}, config));
}

/**
 * <p>Factory method to get customized Ext.TabPanel</p>
 */
var infoTabPanel = function(config) {
	return new Ext.TabPanel(Ext.apply({
		activeTab : 0,
		frame     : true
	}, config));
}

/**
 * <p>Builder method which forms Company information panel.</p>
 */
var buildCompanyInfoPanel = function(responseJson) {	
	var companyInfoPanel = infoPanel({id:'companyId'});
	
	companyInfoPanel.setTitle("Info: Company");
	
	var Name = textField({id:Ext.id(), fieldLabel:'Name', editable:false, readOnly:true});
	Name.setValue(responseJson.name);
	
	var Email = textField({id:Ext.id(), fieldLabel:'Email', editable:false, readOnly:true, emptyText:'N/A'});
	Email.setValue(responseJson.email);
	
	var Address = textField({id:Ext.id(), fieldLabel:'Address', editable:false, readOnly:true, emptyText:'N/A'});
	Address.setValue(responseJson.address);
	
	var Phone = textField({id:Ext.id(), fieldLabel:'Phone', editable:false, readOnly:true, emptyText:'N/A'});
	Phone.setValue(responseJson.phone);
	
	companyInfoPanel.add(Name);
	companyInfoPanel.add(Email);
	companyInfoPanel.add(Address);
	companyInfoPanel.add(Phone);
	
	return companyInfoPanel;
}

/**
 * <p>Builder method which forms Department information panel.</p>
 */
var buildDepartmentInfoPanel = function(responseJson) {	
	var departmentInfoPanel = infoPanel({id:'departmentId'});
	
	departmentInfoPanel.setTitle("Info: Department");
	
	var Name = textField({id:Ext.id(), fieldLabel:'Name', editable:false, readOnly:true});
	Name.setValue(responseJson.name);
	
	var Email = textField({id:Ext.id(), fieldLabel:'Email', editable:false, readOnly:true, emptyText:'N/A'});
	Email.setValue(responseJson.email);
		
	var Phone = textField({id:Ext.id(), fieldLabel:'Phone', editable:false, readOnly:true, emptyText:'N/A'});
	Phone.setValue(responseJson.phone);
	
	departmentInfoPanel.add(Name);
	departmentInfoPanel.add(Email);
	departmentInfoPanel.add(Phone);
	
	return departmentInfoPanel;
}

/**
 * <p>Builder method which forms Project information panel.</p>
 */
var buildProjectInfoPanel = function(responseJson) {
	var projectInfoPanel = infoPanel({id:'projectId'});
	
	projectInfoPanel.setTitle("Info: Project");
	
	var Name = textField({id:Ext.id(), fieldLabel:'Name', editable:false, readOnly:true});
	Name.setValue(responseJson.name);
	
	var Email = textField({id:Ext.id(), fieldLabel:'Email', editable:false, readOnly:true, emptyText:'N/A'});
	Email.setValue(responseJson.email);
		
	var Phone = textField({id:Ext.id(), fieldLabel:'Phone', editable:false, readOnly:true, emptyText:'N/A'});
	Phone.setValue(responseJson.phone);
	
	var Department = textField({id:Ext.id(), fieldLabel:'Department', editable:false, readOnly:true});
	Department.setValue(responseJson.department);
	
	projectInfoPanel.add(Name);
	projectInfoPanel.add(Email);
	projectInfoPanel.add(Phone);
	projectInfoPanel.add(Department);
	
	return projectInfoPanel;
}

var empImage = function(img, alt) {
	return new Ext.Component({
		tpl  : new Ext.XTemplate(
				'<tpl for=".">',
					'<div title="{alt}" class="employeePhoto">',
					'<img src="data:image/png;base64,{image}" alt="{alt}">',
					'</div>',
				'</tpl>'
		),
		data : [{
			image : img,
			alt   : alt
		}]
	});
}
/**
 * <p>Builder method which forms Employee information panel.</p>
 */
var buildEmployeeInfoPanel = function(responseJson) {
	var employeeInfoTabPanelContainer   = infoTabPanel({id:'employeeInfoTabPanelContainerId'});
	var employeeInfoPanelMain           = infoPanel({id:'employeeInfoPanelMainId'});
	var employeeInfoPanelAdditional     = infoPanel({id:'employeeInfoPanelAdditionalId'});
	
	employeeInfoPanelMain.setTitle("Common info: Employee");
	employeeInfoPanelAdditional.setTitle("Additional info: Employee");
	
	var Name = textField({id:Ext.id(), fieldLabel:'Name', editable:false, readOnly:true});
	Name.setValue(responseJson.name);
	
	var BirthDate = dateField({id:Ext.id(), fieldLabel:'Birth date', editable:false, readOnly:true});
	BirthDate.setValue(new Date(responseJson.birthDate));
	
	var Email = textField({id:Ext.id(), fieldLabel:'Email', editable:false, readOnly:true, emptyText:'N/A'});
	Email.setValue(responseJson.email);
		
	var Phone = textField({id:Ext.id(), fieldLabel:'Phone', editable:false, readOnly:true, emptyText:'N/A'});
	Phone.setValue(responseJson.phone);
	
	var HiredDate = dateField({id:Ext.id(), fieldLabel:'Hired date', editable:false, readOnly:true});
	HiredDate.setValue(new Date(responseJson.hiredDate));
	
	var Position = textField({id:Ext.id(), fieldLabel:'Position', editable:false, readOnly:true});
	Position.setValue(responseJson.position);
	
	var Project = textField({id:Ext.id(), fieldLabel:'Project', editable:false, readOnly:true});
	Project.setValue(responseJson.project);
	
	var Department = textField({id:Ext.id(), fieldLabel:'Department', editable:false, readOnly:true});
	Department.setValue(responseJson.department);
	
	var image = empImage(responseJson.photo, responseJson.name + ' photo');
	
	employeeInfoPanelMain.add(image);
	employeeInfoPanelMain.add(Name);
	employeeInfoPanelMain.add(BirthDate);
	
	employeeInfoPanelAdditional.add(HiredDate);
	employeeInfoPanelAdditional.add(Position);
	employeeInfoPanelAdditional.add(Email);
	employeeInfoPanelAdditional.add(Phone);
	employeeInfoPanelAdditional.add(Project);
	employeeInfoPanelAdditional.add(Department);
	
	employeeInfoTabPanelContainer.add(employeeInfoPanelMain);
	employeeInfoTabPanelContainer.add(employeeInfoPanelAdditional);
		
	return employeeInfoTabPanelContainer;
}

var processSuccessGetElementResponse = function(infoPanelObj, node, response, opts) {
	var responseJson = Ext.util.JSON.decode(response.responseText);
	
	if (responseJson.success === "true") {		
		infoPanelObj.removeAll();
		
		if(node.id =='_treeRoot_') {
			infoPanelObj.add(buildCompanyInfoPanel(responseJson));
			infoPanelObj.layout.setActiveItem('companyId');
		} else if(node.id.match('_DEP_')) {
			infoPanelObj.add(buildDepartmentInfoPanel(responseJson));
			infoPanelObj.layout.setActiveItem('departmentId');
		} else if(node.id.match('_PRJ_')) {
			infoPanelObj.add(buildProjectInfoPanel(responseJson));
			infoPanelObj.layout.setActiveItem('projectId');
		} else if(node.id.match('_EMP_')) {
			infoPanelObj.add(buildEmployeeInfoPanel(responseJson));
			infoPanelObj.layout.setActiveItem('employeeInfoTabPanelContainerId');
		}
		
		infoPanelObj.doLayout();
		
	} else {
		Ext.Msg.alert('ERROR', 'An error occured during data retrieving on the server. ' + (responseJson.errorMessage ? responseJson.errorMessage : ''));
	}
}

var processFailureGetElementResponse = function(infoPanelObj, node, response, opts) {
	Ext.Msg.alert('ERROR', 'Unknown error occured.');
}

var showInfoPanelContent = function(node, infoPanelObj){
	Ext.Ajax.request({
		url    : 'dispatcher/getElement',
		
		params : {
			node     : node.id,
			nodeName : node.text
		},
		
		success: function(response, opts) {
			processSuccessGetElementResponse(infoPanelObj, node, response, opts);
		},
		
		failure: function(response, opts) {
			processFailureGetElementResponse(infoPanelObj, node, response, opts);
		}
	});
};